<template>
  <div class="home">
    <!-- 轮播图区域 -->
    <section class="hero-section">
      <el-carousel height="500px" indicator-position="outside">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <div class="banner-item" :style="{ backgroundImage: `url(${banner.image})` }">
            <div class="banner-content">
              <h2>{{ banner.title }}</h2>
              <p>{{ banner.description }}</p>
              <el-button type="primary" size="large" @click="$router.push('/search')">
                立即预订
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 搜索区域 -->
    <section class="search-section">
      <div class="search-container">
        <h2>寻找您的理想住宿</h2>
        <div class="search-form">
          <el-input
              v-model="searchForm.keyword"
              placeholder="输入目的地"
              size="large"
              class="search-input"
          />
          <el-date-picker
              v-model="searchForm.checkIn"
              type="date"
              placeholder="入住日期"
              size="large"
              class="search-date"
          />
          <el-date-picker
              v-model="searchForm.checkOut"
              type="date"
              placeholder="退房日期"
              size="large"
              class="search-date"
          />
          <el-select
              v-model="searchForm.guests"
              placeholder="人数"
              size="large"
              class="search-guests"
          >
            <el-option label="1人" value="1" />
            <el-option label="2人" value="2" />
            <el-option label="3人" value="3" />
            <el-option label="4人" value="4" />
            <el-option label="5人以上" value="5+" />
          </el-select>
          <el-button type="primary" size="large" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </div>
      </div>
    </section>


    <!-- 精选房源区域 -->
    <section class="properties-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">发现·心动之选</h2>
          <p class="section-subtitle">我们为您精选了当下最受欢迎的住宿</p>
        </div>

        <div v-if="propertyList.length > 0" class="property-grid">
          <div
              v-for="property in propertyList"
              :key="property.id"
              class="property-card"
              @click="navigateToDetail(property.id)"
          >
            <!-- ==================== 热门标注优化 ==================== -->
            <div v-if="property.isHot === 1" class="hot-ribbon">
              <span>热门推荐</span>
            </div>

            <div class="card-image-wrapper">
              <img :src="property.imageUrl" :alt="property.title" class="property-image" />
            </div>

            <div class="card-content">
              <span class="property-type-tag">{{ property.roomType || '精品住宅' }}</span>
              <h3 class="property-title">{{ property.title }}</h3>
              <p class="property-location">
                <el-icon><Location /></el-icon>
                <span>{{ property.city }} · {{ property.propertyType || '公寓' }}</span>
              </p>
              <div class="property-footer">
                <div class="property-price">
                  <span class="price-value">¥{{ property.basePrice }}</span>
                  <span class="price-unit">/ 晚起</span>
                </div>
                <div class="property-rating">
                  <el-icon color="#FFB800"><StarFilled /></el-icon>
                  <span>4.7</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else-if="!loading" class="empty-state">
          <el-empty description="暂无房源信息，我们正在努力上新中！" />
        </div>

        <!-- 加载状态和控制按钮 -->
        <div class="pagination-container">
          <div v-if="loading" class="loading-indicator">
            <el-icon class="is-loading" size="24"><Loading /></el-icon>
            <span>正在加载更多美宿...</span>
          </div>
          <div v-if="!loading && hasMore" class="load-more-wrapper">
            <el-button class="load-more-btn" size="large" @click="loadMoreProperties">
              探索更多
            </el-button>
          </div>
          <div v-if="!loading && !hasMore && propertyList.length > 0" class="no-more-indicator">
            <span>已经到底啦，看看别的吧 ~</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
// 修复：导入需要的图标
import { Location, Search, Loading } from '@element-plus/icons-vue';

const router = useRouter();

// 修复：添加缺失的响应式数据
const banners = ref([]);
const searchForm = ref({
  keyword: '',
  checkIn: '',
  checkOut: '',
  guests: ''
});

const propertyList = ref([]);
const pagination = ref({
  pageNum: 1,
  pageSize: 8,
  total: 0,
});
const loading = ref(true);

const hasMore = computed(() => {
  return propertyList.value.length < pagination.value.total;
});

// 修复：添加缺失的方法
const handleSearch = () => {
  // 搜索逻辑实现
  console.log('搜索参数:', searchForm.value);
  router.push({
    path: '/search',
    query: {
      keyword: searchForm.value.keyword,
      checkIn: searchForm.value.checkIn,
      checkOut: searchForm.value.checkOut,
      guests: searchForm.value.guests
    }
  });
};

const fetchProperties = async () => {
  if (loading.value && pagination.value.pageNum > 1) return;
  if (!hasMore.value && pagination.value.pageNum > 1) return;

  loading.value = true;
  try {
    const response = await axios.get('/api/properties/list', {
      params: {
        pageNum: pagination.value.pageNum,
        pageSize: pagination.value.pageSize,
      },
    });

    console.log('从后端接收到的原始数据:', response.data);

    const data = response.data;
    propertyList.value = [...propertyList.value, ...data.list];
    pagination.value.total = data.total;
  } catch (error) {
    console.error('获取房源列表失败:', error);
    ElMessage.error('获取房源信息失败，请稍后再试');
  } finally {
    loading.value = false;
  }
};

const loadMoreProperties = () => {
  pagination.value.pageNum++;
  fetchProperties();
};

const navigateToDetail = (propertyId) => {
  router.push(`/property/${propertyId}`);
};

onMounted(() => {
  fetchProperties();
});
</script>

<style scoped>
/* 全局字体和颜色 */
.home-page {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  background-color: #f7f9fc;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 区域头部样式 */
.properties-section {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #1a202c;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #718096;
}

/* 房源网格布局 */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}

/* 房源卡片精修 */
.property-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative; /* 为丝带定位 */
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ==================== 热门推荐丝带样式 ==================== */
.hot-ribbon {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 90px;
  height: 90px;
  overflow: hidden;
  z-index: 10;
}

.hot-ribbon span {
  position: absolute;
  display: block;
  width: 135px;
  padding: 8px 0;
  background-image: linear-gradient(45deg, #ff4757, #ff6b81);
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  text-align: center;
  right: -30px;
  top: 20px;
  transform: rotate(45deg);
}

.card-image-wrapper {
  width: 100%;
  padding-top: 75%; /* 创建一个4:3的宽高比容器 */
  position: relative;
  overflow: hidden;
}

.property-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片不变形 */
  transition: transform 0.4s ease;
}

.property-card:hover .property-image {
  transform: scale(1.05); /* 悬停时图片轻微放大 */
}

.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 让内容区域填满剩余空间 */
}

.property-type-tag {
  display: inline-block;
  background-color: #edf2f7;
  color: #4a5568;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 12px;
  align-self: flex-start; /* 标签靠左 */
}

.property-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
  line-height: 1.4;
  /* 限制标题最多显示两行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.2rem * 1.4 * 2); /* 保证标题区域高度稳定 */
}

.property-location {
  font-size: 0.9rem;
  color: #718096;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.property-footer {
  margin-top: auto; /* 将底部内容推到底部 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.property-price {
  display: flex;
  align-items: baseline;
}

.price-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #dd6b20; /* 换一个更温暖的橙色 */
}

.price-unit {
  font-size: 0.9rem;
  color: #718096;
  margin-left: 4px;
}

.property-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #4a5568;
}

/* 加载和空状态样式优化 */
.pagination-container {
  padding: 40px 0;
  text-align: center;
}

.loading-indicator, .no-more-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #718096;
  font-size: 1rem;
}

.load-more-btn {
  border-radius: 999px;
  padding: 12px 32px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.load-more-btn:hover {
  transform: scale(1.05);
}

.empty-state {
  padding: 60px 0;
}
</style>